<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>选择职位</title>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/selectp.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css" />
</head>

<body>
<h3>已选择职位</h3>
<button>&nbsp;针灸师&nbsp;&nbsp;<span style="font-size: 4vw">×</span>&nbsp;</button>
<button>&nbsp;按摩师&nbsp;&nbsp;<span style="font-size: 4vw">×</span>&nbsp;</button><br><br>
<p style="color: #4141419e">选择您的意向职业</p>
<div class="page-wrapper  toggled">
    <nav id="sidebar" class="sidebar-wrapper">
        <div class="sidebar-content">
            <div class="sidebar-menu">
                <ul>
                    <li class="sidebar-dropdown">
                        <a  href="#" ><i class=""></i><span style="font-size: 4vw;color: #4F4F4F;">临床类</span> </a>
                        <div class="sidebar-submenu" >
                            <ul>
                                <li><a href="#">针灸师</a> </li>
                                <li><a href="#">坐诊医师</a></li>
                                <li><a href="#">按摩师</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown active">
                        <a  href="#" ><i class=""></i><span style="font-size: 4vw;color: #4F4F4F;">中医类</span> </a>
                        <div class="sidebar-submenu" style="display: block;">
                            <ul>
                                <li><a href="#">针灸师</a> </li>
                                <li><a href="#">坐诊医师</a></li>
                                <li><a href="#">按摩师</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown">
                        <a href="#"><i class=""></i><span style="font-size: 4vw;color: #4F4F4F;">康复理疗类</span> </a>
                        <div class="sidebar-submenu">
                            <ul>
                                <li><a href="#">针灸师</a> </li>
                                <li><a href="#">坐诊医师</a></li>
                                <li><a href="#">按摩师</a></li>
                                <li><a href="#">工程师</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown">
                        <a href="#"><i class=""></i><span style="font-size: 4vw;color: #4F4F4F;">药事类</span></a>
                        <div class="sidebar-submenu">
                            <ul>
                                <li><a href="#">针灸师</a> </li>
                                <li><a href="#">坐诊医师</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div><!-- sidebar-menu  -->
        </div><!-- sidebar-content  -->
    </nav><!-- sidebar-wrapper  -->
</div><!-- page-wrapper -->

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(".firstItem").click(function () {
        $(this).find(".secondItem").slideToggle();
        $(this).siblings('.firstItem').find('.secondItem').slideUp();
    });
    $(".secondItem").click(function () {
        $(this).find(".secondItem").addClass('red');
    });

    $(document).ready(function() {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function() {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function() {
            $('#wrapper').toggleClass('toggled');
        });
    });
    jQuery(function($) {

        $(".sidebar-dropdown > a").click(function(){
            $(".sidebar-submenu").slideUp(250);
            if ($(this).parent().hasClass("active")){
                $(".sidebar-dropdown").removeClass("active");
                $(this).parent().removeClass("active");
            }else{
                $(".sidebar-dropdown").removeClass("active");
                $(this).next(".sidebar-submenu").slideDown(250);
                $(this).parent().addClass("active");
            }

        });

        $("#toggle-sidebar").click(function(){
            $(".page-wrapper").toggleClass("toggled");
        });

        if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            $(".sidebar-content").mCustomScrollbar({
                axis:"y",
                autoHideScrollbar: true,
                scrollInertia: 300
            });
            $(".sidebar-content").addClass("desktop");

        }
    });
</script>

</body>
</html>
